<script setup>
import {onMounted, ref} from "vue";
import request from "@/assets/js/mobileRequest";

const onClickLeft = () => history.back();
const result = ref('');
const showPicker = ref(false);
const columns = [
  { text: '商品质量问题', value: '商品质量问题' },
  { text: '配送延迟', value: '配送延迟' },
  { text: '服务态度', value: '服务态度' },
];

const value = ref([
  { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
]);

const complain = ref({

});

const orderCards = ref({});

onMounted(() => {
  let id = new URLSearchParams(location.search).get('orderId')
  console.log(id);
  request.get(BASE_URL + "/v1/order/select?orderId=" + id).then((response) => {
    if (response.data.code == 2000) {
      orderCards.value = response.data.data[0];
    }
  })
})

const message = ref();

const onConfirm = ({ selectedOptions }) => {
  result.value = selectedOptions[0]?.text;
  showPicker.value = false;
};
const onSubmit = (values) => {
  console.log('submit', values);
};
</script>

<template>
  <div style="background-color: #f7f8fa">
    <div v-if="order.orderStatus == '异常订单'">
      <van-nav-bar
          title="订单投诉"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
      />
      <van-cell-group style="text-align: left;">
        <van-cell title="订单信息" style="font-weight: bold;"/>
        <van-cell title="订单标题" :value="orderCards.orderTitle" />
        <van-cell title="订单类型" :value="'校园派'+orderCards.orderType+'服务'" />
        <van-cell title="订单号" :value="orderCards.orderId" />
        <van-cell title="支付时间" :value="orderCards.creationTime" />
      </van-cell-group>
      <br>
      <van-cell-group inset>
        <van-cell title="投诉单填写" inert style="font-weight: bold;"/>
      </van-cell-group>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
              v-model="result"
              is-link
              readonly
              required
              name="投诉原因"
              label="投诉原因"
              placeholder="点击选择投诉原因"
              @click="showPicker = true"
          />
          <van-popup v-model:show="showPicker" position="bottom">
            <van-picker
                :columns="columns"
                @confirm="onConfirm"
                @cancel="showPicker = false"
            />
          </van-popup>
          <van-field
              v-model="message"
              rows="2"
              autosize
              required
              label="投诉描述"
              type="textarea"
              maxlength="50"
              placeholder="请输入描述"
              show-word-limit
          />
        </van-cell-group>
        <van-cell-group inset>
          <van-cell title="上传照片" inert style="font-weight: bold;"/>
          <van-field name="uploader" label="文件上传">
            <template #input>
              <van-uploader v-model="value" />
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>

  </div>
</template>

<style scoped>

</style>